<template>
    <div class="Special">
        <!-- 头部 -->
		<Header :navActive="1" ref="Header"/>
		<!-- 主内容区 -->
		<div class="main cl">
            <!-- 轮播图 -->
            <el-carousel height="500px" class="banner" :interval='5000'>
                <el-carousel-item v-for="(item,index) in banner" :key="index">
                    <template v-if="item.redirect">
                        <a :href="item.redirect" :target="item.open?'_blank':''"><img :src="item.image_dictText"></a>
                    </template>
                    <template v-else>
                        <img :src="item.image_dictText">
                    </template>
                </el-carousel-item>
            </el-carousel>
            <!-- 搜索框 -->
			<div class="searchBox">
				<div class="search">
					<div class="inputBox fl"><input v-model="searchVal" type="text" autocomplete="off" placeholder="请输入专场名称"/></div>
					<el-button type="primary" class="btn fr" @click="search">搜索</el-button>
				</div>
			</div>
            <div class="block w1200">
                <!-- 列表 -->
                <div class="list cl">
                    <router-link :to="{name:'SpecialIndexJob',query:{id:item.id}}" target="_blank" class="item" v-for="(item,index) in list" :key="index">
                        <div class="img"><img :src="item.imageFileId_dictText"></div>
                        <div class="text">
                            <p>名称：{{item.title}}</p>
                            <p>时间：{{item.startTime}} - {{item.endTime}}</p>
                            <div class="state state0" v-if="item.state==0">待开始</div>
                            <div class="state state1" v-if="item.state==1">进行中</div>
                            <div class="state state2" v-if="item.state==2">已结束</div>
                        </div>
                    </router-link>
                </div>
                <!-- 暂无数据 -->
                <nodata v-if="list.length==0" />
                <el-pagination background layout="prev, pager, next" hide-on-single-page :current-page="pageNo" :page-size='pageSize' :total="pageTotal" @current-change="handleCurrentChange"></el-pagination>
            </div>
		</div>
        <!-- 底部 -->
		<Footer />
    </div>
</template>

<script>
    import {block,specialList} from '@/api/api'
	import Header from '@/components/Header.vue'
    import Footer from '@/components/Footer.vue'
    import nodata from '@/components/nodata.vue'
	export default {
		//组件注入
		components: {Header,Footer,nodata},
        //存放数据
        data() {
            return {
                banner:[],//banner
                searchVal:'',//搜索
                pageNo:1,//当前页码
                pageSize:9,//单页个数
                pageTotal:1,//总数
                list:[],//列表
            }
        },
        //接受父组件传递的值
        props:[],
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {
            //搜索
            search(){
                this.pageNo = 1
                this.getList()
            },
            //切换页码
            handleCurrentChange(pageNo){
                this.pageNo = pageNo
                this.list = []
                this.getList();
            },
            //专场列表
            getList(){
                specialList({
                    'title':this.searchVal,
                    'pageNo':this.pageNo,
                    'pageSize':this.pageSize,
                }).then(res =>{
                    if(res.code==200){
                        this.pageTotal = res.result.total
                        let list = res.result.records
                        for(let i in list){
                            let nowDate = new Date().getTime()
                            let itemDate1 = new Date(list[i].startTime).getTime()
                            let itemDate2 = new Date(list[i].endTime).getTime()
                            if(nowDate>itemDate1&&nowDate<itemDate2){
                                list[i].state = 1
                            }else if(nowDate>itemDate2){
                                list[i].state = 2
                            }else{
                                list[i].state = 0
                            }
                            list[i].startTime = list[i].startTime.split(' ')[0].replace(/\-/g,".");
                            list[i].endTime = list[i].endTime.split(' ')[0].replace(/\-/g,".");
                        }
                       // this.list = list
                     //   alert();
                        this.list =this.$imgResizes(list,'390x101','imageFileId_dictText');
                    }
                });
            }
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {

        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            //专场banner
			block({
				'code':'zc_banner'
			}).then(res =>{
				if(200==res.code){
					this.banner = res.result.blockData
				}
            });
            //获取列表数据
            this.getList()
        }
    };
</script>
<style lang="scss">
    @mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    @mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
    @mixin transition{transition: all .3s;}
    .Special{background: #F6F6F6;
        .main{
            .banner{width: 100%;height: 500px;
                img{width: 100%;height: 100%;}
            }
            /* 搜索 */
            .searchBox{width: 850px;height: auto;overflow: hidden;margin: 30px auto;
                .search{height: 55px;background: #fff;position: relative;
                    .inputBox{width: 660px;margin-left: 20px;position: relative;z-index: 1;top: 2px;
                        input{width: 100%;height: 51px;line-height: 51px;font-size: 16px;}
                    }
                    .btn{width: 175px;height: 55px;line-height: 55px;font-size: 16px;color: #fff;font-weight: bold;text-align: center;@include transition();position: absolute;right: 0;top: 0;z-index: 1;}
                    &:before{content: "";width: 100%;height: 100%;border:2px solid #E54437;position: absolute;left: 0;top: 0;z-index: 0;}
                }
            }
            .block{height: auto;padding-bottom: 100px;
                /* list */
                .list{width: 1215px;height: auto;
                    .item{width: 390px;height: auto;overflow: hidden;float: left;margin: 0 15px 15px 0;cursor: pointer;@include transition();
                        .img{width: 390px;height: 101px;
                            img{width: 100%;height: 100%;}
                        }
                        .text{height: auto;overflow: hidden;background: #fff;padding: 20px;position: relative;
                            p{font-size: 14px;color: #666;line-height: 30px;@include text-ellipsis();}
                            .state{font-size: 14px;position: absolute;right: 20px;bottom: 26px;
                                &.state0{color: #E54437;}
                                &.state1{color: #1296DD;}
                                &.state2{color: #CCC;}
                            }
                        }
                        &:hover{box-shadow: 5px 5px 20px rgba(0,0,0,.05);transform: translateY(-2px);
                            img{opacity: .85;}
                        }
                    }
                }
                .btn{width: 230px;margin: 40px auto 0;display: block;background: none;}
            }
        }
    }
</style>
